<template>
    <el-card class="sku-list">
        <el-table
            border
            stripe
            :data="skuList"
            v-loading="loading">
            <el-table-column
                type="index"
                label="序号"
                width="80"
                align="center"
                row-key="id"
            >
            </el-table-column>
            <el-table-column
                prop="skuName"
                label="名称"
                width="width">
            </el-table-column>
            <el-table-column
                prop="skuDesc"
                label="描述"
                width="width">
            </el-table-column>
            <el-table-column
                prop="prop"
                label="默认图片"
                width="width">
                <template slot-scope="{row,$index}">
                    <div class="info">
                        <img :src="row.skuDefaultImg" alt="" style="width:100px;height:80px">
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="weight"
                label="重量（kg）"
                width="width">
            </el-table-column>
            <el-table-column
                prop="price"
                label="价格（元）"
                width="width">
            </el-table-column>
            <el-table-column
                prop="prop"
                label="操作"
                width="width">
                <template slot-scope="{row,$index}">
                    <HintButton type="info" icon="el-icon-top" title="上架"></HintButton>
                    <HintButton type="success" icon="el-icon-bottom" title="下架"></HintButton>
                    <HintButton type="primary" icon="el-icon-edit" title="编辑" @click="toUpdateSku"></HintButton>
                    <HintButton type="info" icon="el-icon-info" title="详细信息" @click="detailMessage(row)"></HintButton>
                    <HintButton type="danger" icon="el-icon-delete" title="删除"></HintButton>
                </template>
            </el-table-column>
        </el-table>
        <!-- :pager-count = 3 -->
        <el-pagination
            background
            :current-page="page"
            :total="total"
            :page-size="limit"
            :page-sizes="[5, 10, 20, 30, 40, 50]"
            align="center"
            layout="prev, pager, next,jumper, ->,sizes,total"
            @current-change="getSkuList"
            @size-change="changeSize"
            >
        </el-pagination>
        <!-- :direction="direction"
            :before-close="handleClose" -->
        <el-drawer
            :visible.sync="isShowSkuInfo" size="50%" :with-header="false">
            <el-row>
                <el-col :span="6">名称</el-col>
                <el-col :span="16"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6">描述</el-col>
                <el-col :span="16"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6">价格</el-col>
                <el-col :span="16"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6">价格</el-col>
                <el-col :span="16"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6">价格</el-col>
                <el-col :span="16"></el-col>
            </el-row>
        </el-drawer>
    </el-card>
</template>

<script>
export default {
    name: 'Sku',
    data(){
        return{
            skuList:[], //sku列表
            page:1, //默认页码
            limit:5, //每页数量
            total:0, //数据库中的总记录数
            loading:false,
            //抽屉显示与否
            isShowSkuInfo:false
        }
    },
    mounted(){
        this.getSkuList()
    },
    methods:{
        toUpdateSku(){
            this.$message.info('正在开发中...')
        },
        async getSkuList(page=1){
            this.page = page
            this.loading = true
            const result = await this.$API.sku.getList(this.page, this.limit)
            this.skuList = result.data.records
            this.total = result.data.total
            this.loading = false
            console.log(result.data.records, 'result.data.records')
        },
        changeSize(size){
            this.limit = size
            this.getSkuList()
        },
        //点击按钮查看详细信息
        detailMessage(row){
            this.isShowSkuInfo = true
        }
    }
}
</script>

<style lang="scss" scoped>

</style>